<template>
  <div>
    <el-table :data="articleList" style="width: 100%">
      <el-table-column type="index"> </el-table-column>
      <el-table-column prop="title" label="标题"> </el-table-column>
      <el-table-column prop="author" label="作者"> </el-table-column>
      <el-table-column prop="type" label="分类"> </el-table-column>
      <el-table-column label="操作">
        <template scope="scope">
          <el-button
            type="primary"
            size="small"
            icon="el-icon-edit"
            @click="edit(scope.row.id)"
            >编辑</el-button
          >
          <el-button type="danger" size="small" icon="el-icon-delete"
          @click="del(scope.row.id)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <el-dialog  title="提示" :visible.sync="dialogVisible" width="60%">
      <el-row>
        <el-input
          v-model="dialogData.title"
          placeholder="请输入标题"
        ></el-input>
      </el-row>
      <el-row>
        <el-input
          v-model="dialogData.author"
          placeholder="请输入作者"
        ></el-input>
      </el-row>
      <el-row>
        <el-select v-model="dialogData.type" placeholder="请选择分类">
          <el-option
            :label="item.type"
            :value="item.type"
            v-for="(item, i) in $store.state.classType.classtype"
            :key="i"
          ></el-option>
        </el-select>
      </el-row>
      <Editor
        :id="id"
        :onchangeContent="changeContent"
        :onchangeLst="changeLst"
         ref="editor"
      ></Editor>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="changeAll"
          >确 定</el-button
        >
      </span>
    </el-dialog>
   
  </div>
</template>

<script>
import { getList,chengeListById,delArticle } from "../../api/article";
export default {
  data() {
    return {
      dialogVisible: false,
      dialogData: {},
      articleList: [],
      id:''
    }
  },
  mounted() {  
    this.getlist()
  },
  methods: {
    getlist(){
    getList().then((res) => {
      this.articleList = res.data;
    });
    },
    edit(id){
      this.id = id;
      this.dialogVisible = true
    },
    del(id) {
      delArticle(id).then((res) => {
        this.$message({
          message: "删除完成",
          type: "success",
        });
         this.getlist();
      });
    },
    changeLst(data){
      this.dialogData=data
    },
    // 重新给content赋值
    changeContent(content) {
      this.dialogData.content = content;
    },
    changeAll(){
      this.dialogVisible = false
      chengeListById(this.dialogData).then(()=>{
        this.$message({
          message: '修改成功',
          type: 'success'
        });
         this.getlist()
        // this.articleList.forEach((ele,i)=>{
        //   if(ele.id==this.dialogData.id){
        //     this.articleList[i]=this.dialogData
        //   }
        // })
      })
    }
  },
};
</script>

<style scoped>
.el-row {
  margin: 15px 0;
}

</style>
